<template>
    <div class="w-full h-full ">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="欢迎" name="0">
                <div class="block text-center">
                    <span class="text-4xl">欢迎来到个性化音乐推荐系统</span>
                    <el-carousel height="300px" class="w-2/3 m-auto">
                        <el-carousel-item>
                            <img :src="pic1" class="!w-full h-full" />
                            <!-- <h3 class="small justify-center" text="2xl">{{ }}</h3> -->
                        </el-carousel-item>
                        <el-carousel-item>
                            <img :src="pic2" class="!w-full h-full" />
                            <!-- <h3 class="small justify-center" text="2xl">{{ }}</h3> -->
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-tab-pane>
            <el-tab-pane label="新歌速递" name="1">
                <div class="w-full h-full grid grid-cols-3  gap-3">
                    <div v-for="item in new_musics" :key="item.id">
                        <SongCard :name="item.song_name" :pic="item.song_pic" :url="item.song_url" :id="item.song_id" />
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="歌手分类" name="2">
                <div class=" grid grid-cols-12 gap-3">
                    <div v-for="item in maaping" :key="item.type">
                        <el-card @click="() => { getSinger(item.type) }" class="w-full h-full" shadow="hover">
                            <div slot="header" class="text-center">
                                {{ item.label }}
                            </div>
                        </el-card>
                    </div>
                </div>
                <div class="w-full h-full">
                    <div class="w-full h-full grid grid-cols-3  gap-3">
                        <div v-for="item in singers" :key="item.id">
                            <SingerCard :name="item.singer_name" :pic="item.singer_pic" :id="item.singer_id" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="Role" name="third">Role</el-tab-pane> -->
            <!-- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
        </el-tabs>

    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios';
import SongCard from '@/components/SongCard.vue';
import SingerCard from '@/components/SingerCard.vue';
import { ElLoading } from 'element-plus';
import pic1 from '../assets/1.jpg'
import pic2 from '../assets/2.jpg'

let activeName = ref('0')
let new_musics = ref([])

watch(() => activeName.value, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    if (newVal === '1') {
        ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get('http://127.0.0.1:8000/get_new_hot').then(res => {
            let resp = res.data
            new_musics.value = resp.data
            ElLoading.service().close()
        })

    }
})




let maaping =
    [{ 'label': '华语男歌手', 'type': 1001 },
    { 'label': '华语女歌手', 'type': 1002 },
    { 'label': '华语组合 / 乐队', 'type': 1003 },
    { 'label': '欧美男歌手', 'type': 2001 },
    { 'label': '欧美女歌手', 'type': 2002 },
    { 'label': '欧美组合 / 乐队', 'type': 2003 },
    { 'label': '日本男歌手', 'type': 6001 },
    { 'label': '日本女歌手', 'type': 6002 },
    { 'label': '日本组合 / 乐队', 'type': 6003 },
    { 'label': '韩国男歌手', 'type': 7001 },
    { 'label': '韩国女歌手', 'type': 7002 },
    { 'label': '韩国组合 / 乐队', 'type': 7003 },
    { 'label': '其他男歌手', 'type': 4001 },
    { 'label': '其他女歌手', 'type': 4002 },
    { 'label': '其他组合 / 乐队', 'type': 4003 },

    ]
let singers = ref([])
function getSinger(type) {
    ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    axios.get('http://127.0.0.1:8000/get_singer?cat=' + type.toString()).then(res => {
        let resp = res.data
        singers.value = resp.data
        ElLoading.service().close()
    })
}

</script>

<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>